<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>路由:导航守卫</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
  <router-link to="/">index</router-link>
  <router-link to="/user">user</router-link>
  <router-link to="/login">login</router-link>
  <router-view></router-view>
</div>


<script>
  var router = new VueRouter({
    routes:[
      {
        path:'/',
        component:{
          template:`<div>index</div>`
        }
      },
      {
        path:'/user',
        component:{
          template:`<div>user</div>`
        }
      },
      {
        path:'/login',
        component:{
          template:`<div>login</div>`
        }
      }
    ]
  })
  router.beforeEach(function(to,from,next){
    var login = false;
    if(!login && to.path === '/user'){
      next('/login')
    }else{
      next()
    }
  })
  var app = new Vue({
    el:'#app',
    router:router
  })
</script>
</body>
</html>
